<!--审核列表-->
<template>
	<div class="container">
		<el-link icon="el-icon-arrow-left" :underline="false" @click="goBack">返回</el-link>
		<div class="top-part">
			<div class="tabs">
				<div class="tab-item" :class="tabActive == 1 ? 'active' : ''" @click="changeTab('1')">
					企业信息审核
				</div>
				<div class="tab-item" :class="tabActive == 2 ? 'active' : ''" @click="changeTab('2')">
					核查任务审核
				</div>
			</div>
		</div>
		<div class="content-part">
			<div class="search-form">
				<el-form ref="searchForm" :model="searchForm" inline label-position="top">
					<el-form-item class="form-item" prop="unitName" label="企业名称">
						<el-input v-model="searchForm.unitName" type="text" placeholder="请输入企业名称"></el-input>
					</el-form-item>
					<el-form-item class="form-item" prop="unitOrgCode" label="社会统一信用代码">
						<el-input v-model="searchForm.unitOrgCode" type="text" placeholder="请输入社会统一信用代码"></el-input>
					</el-form-item>
					<el-form-item class="form-item" prop="supportUnitCode" label="支撑单位">
						<el-select placeholder="请选择支撑单位" v-model="searchForm.supportUnitCode"
							style="margin-right: 10px">
							<el-option v-for="(it, ind) in supportUnitDict" :key="ind" :label="it.label"
								:value="it.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="form-item" prop="checkStatus" label="审核状态">
						<el-select placeholder="请选择审核状态" v-model="searchForm.checkStatus" style="margin-right: 10px">
							<el-option v-for="(it, ind) in checkStatusDict" :key="ind" :label="it.label"
								:value="it.value"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div class="form-btn">
					<el-button type="text" @click="resetForm">重置</el-button>
					<el-button @click="search" style="margin-left: 36px">搜索</el-button>
				</div>
			</div>
			<div class="table">
				<el-table :data="dataList">
					<el-table-column align="center" prop="unitName" label="企业名称" min-width="200">
						<!-- <template slot-scope="{row}">
              <span class="underline" @click="gotoDetail">{{row.a}}</span>
            </template>-->
					</el-table-column>
					<!-- <el-table-column align="center" prop="b" label="更新类型" min-width="160"></el-table-column> -->
					<el-table-column align="center" prop="supportUnitCode" label="支撑单位" min-width="180">
						<template slot-scope="{ row }">
							<span>{{
                supportUnitDict.find((it) => it.value == row.supportUnitCode)
                  ? supportUnitDict.find(
                      (it) => it.value == row.supportUnitCode
                    ).label
                  : ''
              }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="commitTime" label="提交时间" min-width="120">
						<template slot-scope="{ row }">
							<span>{{
                parseTime(row.commitTime, '{y}-{m}-{d} {h}:{i}')
              }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="commitUser" label="提交人" min-width="120"></el-table-column>
					<el-table-column align="center" :prop="tabActive == '1' ? 'confirmTime':'reviewTime'" label="审核时间"
						min-width="100">

						<template slot-scope="{ row }">
							<span v-if="tabActive == 1">{{
						  parseTime(row.confirmTime, '{y}-{m}-{d} {h}:{i}')
						}}</span>

							<span v-else>{{
						  parseTime(row.reviewTime, '{y}-{m}-{d} {h}:{i}')
						}}</span>
						</template>

					</el-table-column>

					<!-- <el-table-column v-if="tabActive == '2'" align="center" prop="reviewTime" label="审核时间"
							min-width="100"></el-table-column> -->


					<el-table-column align="center" :prop="tabActive == '1' ? 'confirmUser':'reviewUser'" label="审核人"
						min-width="180"></el-table-column>

					<!-- <el-table-column v-if="tabActive == '2'" align="center" prop="reviewUser" label="审核人"
							min-width="180"></el-table-column> -->


					<el-table-column align="center" :prop="tabActive == '1' ? 'confirmStatus':'taskReviewStatus'"
						label="审核状态" min-width="180">
						<template slot-scope="{ row }">
							<span v-if="tabActive == '1'">{{
                confirmStatusDict.find((it) => it.value == row.confirmStatus)
                  ? confirmStatusDict.find(
                      (it) => it.value == row.confirmStatus
                    ).label
                  : ''
              }}</span>

							<span v-else>{{
			    taskReviewStatus.find((it) => it.value == row.taskReviewStatus)
			      ? taskReviewStatus.find(
			          (it) => it.value == row.taskReviewStatus
			        ).label
			      : ''
			  }}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="50">
						<template slot-scope="{ row }">

							<el-button v-if="tabActive == '1'" class="table-btn" type="text" size="small"
								:disabled="row.confirmStatus !== 1" @click="gotoCheckEdit(row)">审核</el-button>

							<el-button v-if="tabActive == '2'" class="table-btn" type="text" size="small"
								:disabled="row.taskReviewStatus !== 1" @click="gotoCheckEdit(row)">审核</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination layout="prev,slot, next" :total="total" @current-change="currentChange">
						<!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
						<span class="current">{{ pageNum }}</span>
						<span class="total">
							/{{
                total % pageSize == 0
                  ? total / pageSize
                  : Math.ceil(total / pageSize)
              }}
						</span>
						<!-- <el-button type="text" class="next">下一页</el-button> -->
					</el-pagination>
				</div>
			</div>
		</div>
		<teskDialog v-model="teskDialogVisible" :row="tableRow" />
	</div>
</template>

<script>
	import {
		listModifyTaskInfo,
		listCheckTaskReview
	} from '@/api/enterprise'
	import {
		parseTime
	} from '@/utils/ruoyi'
	import teskDialog from './component/teskDialog.vue'
	export default {
		components: {
			teskDialog
		},
		data() {
			return {
				parseTime,
				tabActive: '1',
				searchForm: {
					unitName: '',
					unitOrgCode: '',
					supportUnitCode: '',
					checkStatus: ''
				},
				tableRow: null,
				dataList: [{
					a: '上海百万投资管理有限公司',
					d: false,
					e: true,
					f: false,
					g: ['交互式', '有孔', '备案'],
					h: '超过5小时'
				}],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				teskDialogVisible: false // 任务弹窗
			}
		},
		computed: {
			supportUnitDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.supportUnit) {
					list.push({
						label: dict.supportUnit[value],
						value
					})
				}
				return list
			},
			checkStatusDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.checkStatus) {
					list.push({
						label: dict.checkStatus[value],
						value
					})
				}
				return list
			},
			confirmStatusDict() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.confirmStatus) {
					list.push({
						label: dict.confirmStatus[value],
						value
					})
				}
				return list
			},
			taskReviewStatus() {
				const dict = this.$store.getters.dict
				const list = []
				for (let value in dict.taskReviewStatus) {
					list.push({
						label: dict.taskReviewStatus[value],
						value
					})
				}
				return list
			}
		},
		mounted() {
			this.addEvent(window, 'keydown', this.keyDown)
			this.search()
		},
		destroyed() {
		  this.removeEvent(window, 'keydown', this.keyDown)
		},
		methods: {
			changeTab(tab) {
				this.tabActive = tab
				this.resetForm()
				this.search()
			},
			resetForm() {
				this.searchForm = {
					unitName: '',
					unitOrgCode: '',
					supportUnitCode: '',
					checkStatus: ''
				}
			},
			// 回车搜索
    	keyDown(e) {
      	var ev = document.all ? window.event : e
				if (ev.keyCode === 13) {
					// 搜索事件
					this.search()
				}
			},
			search() {
				this.pageNum = 1
				this.getList()
			},
			getList() {
				let fn = this.tabActive == '1' ? listModifyTaskInfo : listCheckTaskReview
				fn({
					...this.searchForm,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					this.dataList = res.data.list
					this.total = res.data.total
				})
			},
			currentChange(page) {
				this.pageNum = page
				this.getList()
			},
			gotoCheckEdit(row) {
				if (this.tabActive == '1') {
					this.$router.push({
						path: `/check/edit?id=${row.id}&enterpriseId=${row.enterpriseId}&unitOrgCode=${row.unitOrgCode}`
					})
				} else {
					this.teskDialogVisible = true
					this.tableRow = row
				}
			},
			gotoDetail() {
				this.$router.push({
					path: '/enterprise/detail'
				})
			},
			goBack() {
				// this.$router.go(-1)
				window.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 48px 108px;

		.top-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 20px;

			.tabs {
				display: flex;
				align-items: center;

				.tab-item {
					cursor: pointer;
					font-size: 16px;
					color: rgba(0, 8, 34, 0.6);
					margin-right: 36px;

					&.active {
						font-size: 26px;
						color: rgba(0, 8, 34, 0.8);
					}
				}
			}
		}

		.content-part {
			background: #1c4088;
			border-radius: 8px 8px 8px 8px;

			.search-form {
				display: flex;
				justify-content: space-between;
				padding: 20px;

				.form-item {
					width: 190px;
					margin-bottom: 0;
					border-left: 1px solid rgba(255, 255, 255, 0.3);

					&:first-child {
						border: none;
					}
				}

				.form-btn {
					height: 72px;
					display: flex;
					align-items: center;
					margin-bottom: 0;

					.el-button--text {
						font-size: 16px;
						color: rgba(255, 255, 255, 0.6);
					}

					.el-button--default {
						width: 80px;
						height: 40px;
						background: #000822;
						border-radius: 4px 4px 4px 4px;
						font-size: 16px;
						color: #ffffff;
						border: none;
					}
				}

				::v-deep .el-form-item {
					.el-form-item__label {
						color: #ffffff;
						padding: 0 15px;
					}

					.el-input__inner {
						background: #1c4088;
						border: none;
						color: #ffffff;
					}
				}
			}

			.table {
				background: #ffffff;
				box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
				border-radius: 8px 8px 8px 8px;

				.underline {
					cursor: pointer;
					color: #e70012;
					border-bottom: 1px solid #e70012;

					&.tag {
						color: #606266;
						border-bottom: 1px solid rgba(0, 8, 34, 0.6);

						&:not(:last-child) {
							margin-right: 10px;
						}
					}
				}

				.actived {
					color: #e70012;
				}

				.table-btn {
					color: rgba(0, 8, 34, 0.8);
					border-bottom: 2px solid #1C4088;
					padding: 4px 0;

					&.is-disabled {
						color: #C0C4CC;
						border-bottom: 2px solid #C0C4CC;
						;
					}
				}

				.page {
					margin-top: 20px;
					text-align: center;
					color: #000822;
					font-size: 14px;

					span {
						min-width: auto;
					}

					.current {
						color: #1c4088;
						font-size: 16px;
					}

					.prev {
						color: rgba(0, 8, 34, 0.6);
						margin-right: 40px;
					}

					.next {
						color: rgba(0, 8, 34, 0.6);
						margin-left: 40px;
					}

					// ::v-deep {
					//   .el-pagination .btn-prev {
					//     padding-right: 0;
					//   }
					//   .el-pagination .btn-next {
					//     padding-left: 0;
					//   }
					// }
				}
			}
		}
	}
</style>